使用九宫格图 (Nine Patch Image) 节点

九宫格图 (Nine Patch Image) 节点可用于创建可伸缩的按钮背景，其尺寸可随九宫格图 (Nine Patch Image) 内容尺寸伸缩。九宫格图 (Nine Patch Image) 会以可控的方式缩放自己的图像，而不是将它们作为一个整体进行缩放。它会将 9 幅图像放在一个 3x3 的网格中：边缘的图像形成边框，中心图像存放九宫格图 (Nine Patch Image) 的内容。

当使用九宫格图 (Nine Patch Image) 时，请记住：

• 中心图像会在所有的方向上拉伸。为了获得最佳效果，请使图像保持为透明或单色。
• 角部的厚度定义了中心图像边框的厚度。Kanzi 不会缩放九宫格图像中的角部。
• 默认情况下，由于九宫格图 (Nine Patch Image) 的大小会发生变化，因此顶部、底部、右侧和左侧的纹理会根据角部纹理之间的空间的变化而缩放。您可以使用环绕模式 (Wrap Mode) 和每种纹理的纹理类型属性来控制设置。请参阅创建 九宫格图 (Nine Patch Image) 节点。

创建 九宫格图 (Nine Patch Image) 节点

要创建 九宫格图 (Nine Patch Image) 节点：

1. 在第三方工具中，为九宫格图 (Nine Patch Image) 节点的每个部分创建图像，并将每个图像保存在单独的文件中。
   您需要为以下对象创建图像：
   • 角部（左上角、右上角、右下角和左下角）
   • 面（顶面、右面、底面和左面）
   • 居中 (Center)
2. 在 Kanzi Studio 中的资产 (Assets) 中，点击导入资产 (Import Assets) 并导入您希望在九宫格图 (Nine Patch Image) 节点中使用的所有图像。
3. 在工程 (Project) 中按下 Alt 并右键点击要在其中创建 九宫格图 (Nine Patch Image) 节点的那个节点，然后选择 九宫格图 (Nine Patch Image)。
   请注意，只能在 3D 节点内创建 3D 节点，只能在 2D 节点内创建 2D 节点。
4. 在 属性 (Properties) 中，将九宫格图 (Nine Patch Image) 属性设置为要用于九宫格图 (Nine Patch Image) 节点各个部分的图像：
   • 将左上角图像 (Top-Left Image) 设置为左上角的纹理
   • 将上方图像 (Top Image) 设置为顶部边框的纹理
   • 将右上角图像 (Top-Right Image) 设置为右上角的纹理
   • 将左侧图像 (Left Image) 设置为左侧边框的纹理
   • 将中心图像 (Center Image) 设置为中心的纹理
   • 将右侧图像 (Right Image) 设置为右侧边框的纹理
   • 将左下角图像 (Bottom-Left Image) 设置为左下角的纹理
   • 将下方图像 (Bottom Image) 设置为底部边框的纹理
   • 将右下角图像 (Bottom-Right Image) 设置为右下角的纹理
5. （可选）您可以控制九宫格图 (Nine Patch Image) 节点如何显示顶部、右侧、底部和左侧纹理：
   
   1. 在素材库 (Library) > 材质和纹理 (Materials and Textures) > 纹理 (Textures) 中，选择九宫格图 (Nine Patch Image) 节点要使用的每个纹理，并设置要用于每个纹理的环绕模式 (Wrap Mode) 属性。
   2. 在 工程 (Project) 中，选择九宫格图 (Nine Patch Image) 节点，并在属性 (Properties) 中为您要控制的纹理设置纹理类型（拉伸类型顶部 (Stretch Type Top)、拉伸类型底部 (Stretch Type Bottom)、拉伸类型左侧 (Stretch Type Left)、拉伸类型右侧 (Stretch Type Right)、拉伸类型中心 (Stretch Type Center)）。

   环绕模式 (Wrap Mode) 属性值	纹理拉伸 (Texture Stretch) 属性值	描述 (Description)
   限制 (Clamp)	拉伸 (Stretch)	默认值。缩放纹理，以填充九宫格图 (Nine Patch Image) 角部纹理之间的空间。
   限制 (Clamp)	环绕 (Wrap)	当九宫格图 (Nine Patch Image) 的角部纹理之间的空间的宽度或高度超过所选纹理的宽度或高度时，扩展所选纹理的最后一列或最后一行像素。
   重复 (Repeat)	拉伸 (Stretch)	缩放纹理，以填充九宫格图 (Nine Patch Image) 角部纹理之间的空间。
   重复 (Repeat)	环绕 (Wrap)	当九宫格图 (Nine Patch Image) 的角部纹理之间的空间的宽度或高度超过所选纹理的宽度或高度时，平铺纹理。

6. （可选）对于九宫格图 (Nine Patch Image) 中的每个图像，您可以设置最适合您应用程序的目标格式。请参阅设置图像的目标格式。

设置图像的目标格式

将工程导出到 kzb 文件时，Kanzi Studio 使用原始图像的格式读取工程中的图像，并以您为每个图像的目标格式 (Target Format) 属性设置的格式将写入 kzb 文件。

如果原始图像的文件格式与您在目标格式 (Target Format) 属性中选择的格式相同，Kanzi Studio 在以下条件下将图像写入 kzb 文件时不会修改图像：

• 预乘阿尔法 (Premultiply Alpha) 已禁用，或阿尔法通道不需要预乘
  要更改此设置，在 工程 (Project) > 属性 (Properties) 中使用 预乘阿尔法 (Premultiply Alpha) 属性。您可以重写想要使用不同设置的图像文件中的该属性值。
  
• 生成 Mipmap (Generate Mipmaps) 已禁用
  您可以在每个图像文件中设置生成 Mipmap (Generate Mipmaps) 属性的值。
  
• 向上取整图像尺寸至数值最接近的 2 的幂 (Round up Image Dimensions to Nearest Power of Two)属性已禁用
  您可以在工程 (Project) > 属性 (Properties) 中设置向上取整图像尺寸至数值最接近的 2 的幂 (Round up Image Dimensions to Nearest Power of Two) 属性的值。
  如启用 向上取整图像尺寸至数值最接近的 2 的幂 (Round up Image Dimensions to Nearest Power of Two) 属性，Kanzi Studio 将在 kzb 文件导出过程中，对工程中所有图像的长度和宽度做向上取整，取数值最为接近的 2 的幂。例如，Kanzi Studio 会将一张大小为 40×30 像素的图像，以 64×32 像素大小导出到 kzb 文件中。
  

如果您的图像是 JPEG 或 PNG 格式，而您不想让Kanzi Studio 修改其导出到 kzb 文件的图像，在图像属性 (Properties) 中启用使用原始图像 (Use Original Image) 属性。

要设置图像目标格式：

1. 在素材库 (Library) > 资源文件 (Resource Files) > 图像 (Images) 中选择您要为其设置目标格式的图像。
   
2. 在属性 (Properties) 中将目标格式 (Target Format) 属性设为要在Kanzi 应用程序中使用的图像格式。
   您选择的格式很重要，因为这会影响 kzb 文件的大小以及 Kanzi 应用程序加载图像时的加载时间。确保您的目标设备支持您为图像选择的目标格式。请参阅图像和纹理最佳实践以及压缩纹理。
   
3. 如果您在上一步中选择的图像格式支持压缩，请配置要使用的压缩方案。请参阅压缩纹理。
   

使用 PNG 压缩

在使用 PNG 压缩时，请记住，因为压缩的 PNG 图像不会以压缩格式进入 GPU，所以 PNG 压缩会影响 PNG 图像数据从 kzb 文件到设备内存的加载。

使用 PNG 压缩来存储和加载 kzb 文件中的图像。为提高应用程序的性能，考虑使用 Kanzi 可以直接发送已压缩格式到设备 GPU 的图像格式。请参阅压缩纹理。

要使用 PNG 压缩：

1. 在Kanzi Studio 的 素材库 (Library) 中，选择 资源文件 (Resource Files) > 图像 (Images)，然后选择您要应用压缩的图像。
2. 在属性 (Properties) 中，将目标格式 (Target Format) 设置为PNG。
   
3. 在属性 (Properties) 中，将PNG 压缩级别 (PNG Compression Level) 属性设置为您要用于图像的压缩：
   • 工程默认值 (Project default) 使用在工程 (Project) > 属性 (Properties) 的PNG 压缩级别 (PNG Compression Level) 属性中设置的 PNG 压缩
   • 无压缩 (No compression) 不使用图像压缩
   • 最佳压缩速度（zlib 级别 1）(Best compression speed, zlib level 1)创建的文件较大，但压缩较快
   • 默认值（zlib 级别 6）(Default, zlib level 6) 创建的文件较小，但压缩耗时较长。这是 Kanzi Studio 用于 PNG 图像的 FreeImage 库的默认选项。
   • 最佳压缩（zlib 级别 9）(Best compression, zlib level 9) 创建的文件最小，但压缩耗时最长
   建议

   您可以在每个图像文件的工程 (Project) > 属性 (Properties) 和属性中设置PNG 压缩级别 (PNG Compression Level) 属性的值。

   

设置 九宫格图 (Nine Patch Image) 的外观

要设置 2D 节点的外观：

• 您可以使用单色、纹理或材质填充 2D 节点。请参阅调整 2D 节点的外观。
  
• 您可以围绕所有三个轴旋转 2D 节点，以创建 3D 透视效果。请参阅为 2D 节点创建 3D 透视效果。
  
• 您可以应用自定义渲染到 2D 节点，以创建后处理效果。请参阅应用自定义渲染到 2D 节点。
  

九宫格图 (Nine Patch Image)属性类型和消息

要查看 九宫格图 (Nine Patch Image) 节点可用属性类型和消息的列表，请参阅Nine patch image。

在 API 中使用 九宫格图 (Nine Patch Image) 节点

有关详细信息，请参阅 API reference中的 NinePatchImage2D 类。

另请参阅

使用网格布局 (Grid Layout) 节点

使用图像 (Image) 节点

使用 Kanzi Studio 为节点启用点击手势

打开导航